<template>
  <div class="container">
    <span>早上好！</span>
    <ul>
      <li>
        <div class="num">
          <div class="num_1">
            <p><span>11000</span></p>
          </div>
        </div>
        <div class="yuan">
          <img src="../../images/u1385(1).png" alt="">
          <div class="icon">
            <img src="../../images/u1386(1).png" alt="">
          </div>
        </div>
        <div class="text">
          <p><span>居民总数量</span></p>
        </div>
      </li>
      <li>
        <div class="num">
          <div class="num_2">
            <p><span>56000</span></p>
          </div>
        </div>
        <div class="yuan">
          <img src="../../images/u1366(1).png" alt="">
          <div class="icon">
            <img src="../../images/u1367(1).png" alt="">
          </div>
        </div>
        <div class="text">
          <p><span>签约居民数量</span></p>
        </div>
      </li>
      <li>
        <div class="num">
          <div class="num_3">
            <p><span>600</span></p>
          </div>
        </div>
        <div class="yuan">
          <img src="../../images/u1373(1).png" alt="">
          <div class="icon">
            <img src="../../images/u1374(1).png" alt="">
          </div>
        </div>
        <div class="text">
          <p><span>待处理服务量</span></p>
        </div>
      </li>
      <li>
        <div class="num">
          <div class="num_4">
            <p><span>8900</span></p>
          </div>
        </div>
        <div class="yuan">
          <img src="../../images/u1379(1).png" alt="">
          <div class="icon">
            <img src="../../images/u1380(1).png" alt="">
          </div>
        </div>
        <div class="text">
          <p><span>已完成服务量</span></p>
        </div>
      </li>
    </ul>
    <div style="width:70%;height:451px;" ref="chartRef" class="echart_1"></div>
    <div class="reminder">
        <el-card class="box-card" style="width: 25%;">
          <template #header>
            <div class="card-header">
              <span>代办提醒</span>
            </div>
          </template>

          <div class="text_item">
            <div class="item_1">
              <p><span>10</span></p>
            </div>
              <div class="text_1">
                <p @click="daiqian"><span>待审核签约申请</span></p>
              </div>
              <div class="border_line">
                <img src="../../images/u1297(1).png" alt="">
              </div>
              <div class="ellipse">
                <img src="../../images/u1066(1).png" alt="">
              </div>
              
          </div>
          <div class="text_item">
            <div class="item_1">
              <p><span>30</span></p>
            </div>
              <div class="text_1">
                <p @click="daishen"><span>待审核服务申请</span></p>
              </div>
              <div class="border_line_1">
                <img src="../../images/u1297(1).png" alt="">
              </div>
              <div class="ellipse_1">
                <img src="../../images/u1066(1).png" alt="">
              </div>
          </div>
          <div class="text_item">
            <div class="item_1">
              <p><span>7</span></p>
            </div>
              <div class="text_1">
                <p @click="daishen"><span>待完成服务</span></p>
              </div>
              <div class="border_line_2">
                <img src="../../images/u1297(1).png" alt="">
              </div>
              <div class="ellipse_2">
                <img src="../../images/u1066(1).png" alt="">
              </div>
          </div>
          <div class="text_item">
            <div class="item_1">
              <p><span>107</span></p>
            </div>
              <div class="text_1">
                <p @click="huifu"><span>待回复消息</span></p>
              </div>
              <div class="border_line_3">
                <img src="../../images/u1297(1).png" alt="">
              </div>
              <div class="ellipse_3">
                <img src="../../images/u1066(1).png" alt="">
              </div>
          </div>
          <div class="text_item">
            <div class="item_1">
              <p><span>23</span></p>
            </div>
              <div class="text_1">
                <p @click="daiqian"><span>待处理续约</span></p>
              </div>
              <div class="border_line_4">
                <img src="../../images/u1297(1).png" alt="">
              </div>
              <div class="ellipse_4">
                <img src="../../images/u1066(1).png" alt="">
              </div>
          </div>
          
    </el-card>
    </div>
 
  <div class="demo-progress">
    <p><span>居民标签</span></p><br>
    <span style="font-size: 13px;
    color: rgb(153, 153, 153);">高血压</span>
    <el-progress :percentage="50" />
    <span style="font-size: 13px;
    color: rgb(153, 153, 153);">冠心病</span>
    <el-progress :percentage="100"  />
    <span style="font-size: 13px;
    color: rgb(153, 153, 153);">高血糖</span>
    <el-progress :percentage="100" />
    <span style="font-size: 13px;
    color: rgb(153, 153, 153);">高血脂</span>
    <el-progress :percentage="100" />
    <span style="font-size: 13px;
    color: rgb(153, 153, 153);">慢病护理</span>
    <el-progress :percentage="50" />
    <span style="font-size: 13px;
    color: rgb(153, 153, 153);">多动症</span>
    <el-progress :percentage="50" />
  </div>

  <div class="default_box">
    <div class="defalut_item">
      <p><span>居民指标异常</span></p>
      <div class="default_1">
        <div class="imgbox">
          <img src="../../images/u1271(1).png" alt="">
        </div>
        <div class="namebox">
          <h4>王然</h4>
          <span style="font-size: 12px; color:rgb(153, 153, 153)">26岁</span>
          <img src="../../images/u1270(1).png" alt="">
        </div>
        <div class="bingqing">
          <img src="../../images/error_u1273(1).png" alt="">&nbsp;
          <span style="color: red;">血糖过高</span>
        </div>
        <el-button type="primary" class="primary">查看详情</el-button>
      </div>

      <div class="default_2">
        <div class="imgbox">
          <img src="../../images/u1271(1).png" alt="">
        </div>
        <div class="namebox">
          <h4>王然</h4>
          <span style="font-size: 12px; color:rgb(153, 153, 153)">26岁</span>
          <img src="../../images/u1270(1).png" alt="">
        </div>
        <div class="bingqing">
          <img src="../../images/error_u1273(1).png" alt="">&nbsp;
          <span style="color: red;">血糖过高</span>
        </div>
        <el-button type="primary" class="primary">查看详情</el-button>
      </div>

      <div class="default_3">
        <div class="imgbox">
          <img src="../../images/u1271(1).png" alt="">
        </div>
        <div class="namebox">
          <h4>王然</h4>
          <span style="font-size: 12px; color:rgb(153, 153, 153)">26岁</span>
          <img src="../../images/u1270(1).png" alt="">
        </div>
        <div class="bingqing">
          <img src="../../images/error_u1273(1).png" alt="">&nbsp;
          <span style="color: red;">血糖过高</span>
        </div>
        <el-button type="primary" class="primary">查看详情</el-button>
      </div>
      
    </div>

  </div>


    <el-table :data="tableData" stripe style="width: 98%">
        <el-table-column prop="team" label="团队" width="180" />
        <el-table-column prop="data" label="2021-01-04" width="180" />
        <el-table-column prop="address" label="2021-01-04" />
    </el-table>
  </div>
  
</template>

<script lang="ts">
import * as echarts from 'echarts';
export default {
  data() {
    return {
      tableData:  [
        {
          team: '李明团队',
          data: '50',
          address: '100',
        },
        {
          team: '李明团队',
          data: '50',
          address: '100',
        },
        {
          team: '李明团队',
          data: '50',
          address: '100',
        },
        {
          team: '李明团队',
          data: '50',
          address: '100',
        },
      ]
    }
  },
  mounted() {
      // 初始化echarts实例
      const myChart = echarts.init(this.$refs.chartRef);
      // 选项（配置项）
      const option = {
          title: {
            text: '居民概况'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['居民数量', '签约量', '服务量']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {
                title:'保存为图片'
              }
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1/4', '1/5', '1/6', '1/7', '1/8', '1/9', '1/10']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '居民数量',
              type: 'line',
              stack: 'Total',
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '签约量',
              type: 'line',
              stack: 'Total',
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '服务量',
              type: 'line',
              stack: 'Total',
              data: [150, 232, 201, 154, 190, 330, 410]
            }
  ]
};
      // 设置配置项选项内容
      option && myChart.setOption(option);
      

  },
  methods: {
    daiqian(){
      this.$router.push('/contract/index')
    },
    daishen(){
      this.$router.push('/service/pending')
    },
    huifu(){
      this.$router.push('/message')
    }
  },
  
}
</script>

<style scoped>
:deep(.el-table){
  margin-top: 20px;
  position: relative;
  left: 8px;
  top:0;
  border-radius: 8px;
}
.primary{
  position: relative;
  top: 128px;
  left:68px;
}
.bingqing{
  position: relative;
  top: 105px;
  left:63px;
}
.namebox{
  position: absolute;
  top: 120px;
  left:90px;
}
.imgbox{
    width: 64px;
    height: 64px;
    left: 83px;
    top: 40px;
    visibility: inherit;
}
.imgbox img{
  border-width: 0px;
    position: absolute;
    left: 68px;
    top: 36px;
    width: 84px;
    height: 84px;
}
.default_1{
  position: absolute;
    left: 13px;
    top: 60px;
    width: 230px;
    height: 280px;
    background-image: inherit;
    background-position: inherit;
    background-size: inherit;
    background-repeat: inherit;
    background-attachment: inherit;
    background-origin: inherit;
    background-clip: inherit;
    background-color: rgb(255, 255, 255);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(242, 242, 242);
    border-radius: 8px;
    box-shadow: rgb(242 242 242) 0px 0px 15px;
}
.default_2{
  position: absolute;
    left: 270px;
    top: 60px;
    width: 230px;
    height: 280px;
    background-image: inherit;
    background-position: inherit;
    background-size: inherit;
    background-repeat: inherit;
    background-attachment: inherit;
    background-origin: inherit;
    background-clip: inherit;
    background-color: rgb(255, 255, 255);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(242, 242, 242);
    border-radius: 8px;
    box-shadow: rgb(242 242 242) 0px 0px 15px;
}
.default_3{
  position: absolute;
    left: 525px;
    top: 60px;
    width: 230px;
    height: 280px;
    background-image: inherit;
    background-position: inherit;
    background-size: inherit;
    background-repeat: inherit;
    background-attachment: inherit;
    background-origin: inherit;
    background-clip: inherit;
    background-color: rgb(255, 255, 255);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(242, 242, 242);
    border-radius: 8px;
    box-shadow: rgb(242 242 242) 0px 0px 15px;
}
.default_box{
    border-width: 0px;
    position: absolute;
    left: 380px;
    top: 677px;
    width: 769px;
    height: 384px;
    display: flex;
    justify-content: space-around;
    
}
.default_box .defalut_item{
    padding: 10px;
    position: absolute;
    left: 0px;
    top: -44px;
    width: 779px;
    height: 384px;
    background-image: inherit;
    background-position: inherit;
    background-size: inherit;
    background-repeat: inherit;
    background-attachment: inherit;
    background-origin: inherit;
    background-clip: inherit;
    background-color: rgb(255, 255, 255);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(242, 242, 242);
    border-radius: 8px;
    box-shadow: rgb(242 242 242) 0px 10px 40px;
}
.demo-progress{
    padding: 10px;
    position: relative;
    left: 8px;
    top: 0px;
    width: 360px;
    height: 384px;
    background-image: inherit;
    background-position: inherit;
    background-size: inherit;
    background-repeat: inherit;
    background-attachment: inherit;
    background-origin: inherit;
    background-clip: inherit;
    background-color: rgb(255, 255, 255);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(242, 242, 242);
    border-radius: 8px;
    box-shadow: rgb(242 242 242) 0px 10px 40px;
    
}

.demo-progress .el-progress--line {
  margin-bottom: 15px;
  width: 350px;
}
.ellipse{
  border-width: 0px;
    position: absolute;
    right: 106px;
    top: 98px;
    width: 8px;
    height: 8px;
}
.ellipse_1{
  border-width: 0px;
    position: absolute;
    right: 106px;
    top: 158px;
    width: 8px;
    height: 8px;
}
.ellipse_2{
  border-width: 0px;
    position: absolute;
    right: 106px;
    top: 228px;
    width: 8px;
    height: 8px;
}
.ellipse_3{
  border-width: 0px;
    position: absolute;
    right: 106px;
    top: 298px;
    width: 8px;
    height: 8px;
}
.ellipse_4{
  border-width: 0px;
    position: absolute;
    right: 106px;
    top: 365px;
    width: 8px;
    height: 8px;
}
.ellipse img{
    border-width: 0px;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 8px;
    height: 8px;
}

.text_item{
  margin-bottom: 20px;
  cursor: pointer;
}

.item_1{
  position: relative;
    left: 0px;
    top: 0px;
    width: 21px;
    height: 24px;
    background-image: inherit;
    background-position: inherit;
    background-size: inherit;
    background-repeat: inherit;
    background-attachment: inherit;
    background-origin: inherit;
    background-clip: inherit;
    background-color: rgba(255, 255, 255, 0);
    border: none;
    border-radius: 0px;
    box-shadow: none;
    font-family: PingFangSC-Medium, "PingFang SC Medium", "PingFang SC";
    font-weight: 500;
    font-style: normal;
    font-size: 20px;
    line-height: 24px;
}
.reminder{
  margin-bottom: 20px;
}
.text_1{
    font-size: 13px;
    color: rgb(153, 153, 153);
    line-height: 24px;
}
.border_line{
    border-width: 0px;
    position: absolute;
    left: 22px;
    top: 135px;
    width: 220px;
    height: 1px;
}
.border_line_1{
  border-width: 0px;
    position: absolute;
    left: 22px;
    top: 188px;
    width: 220px;
    height: 1px;
}
.border_line_2{
  border-width: 0px;
    position: absolute;
    left: 22px;
    top: 260px;
    width: 220px;
    height: 1px;
}
.border_line_3{
  border-width: 0px;
    position: absolute;
    left: 22px;
    top: 325px;
    width: 220px;
    height: 1px;
}
.border_line_4{
  border-width: 0px;
    position: absolute;
    left: 22px;
    top: 390px;
    width: 220px;
    height: 1px;
}
.border_line img{
    border-width: 0px;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 221px;
    height: 2px;
}

.container{
  position: relative;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
:deep(.el-card__body){
  height: 350px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 290px;
  position: absolute;
  right: 15px;
  top: 161px;
}

ul,li{
  list-style: none;
}
ul{
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}
li{
    position: relative;
    width: 265px;
    height: 121px;
    background-color: rgb(255, 255, 255);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(242, 242, 242);
    border-radius: 8px;
    box-shadow: rgb(242 242 242) 0px 10px 40px;
    color: rgb(255, 255, 255);
    line-height: 36px;
}
.echart_1{
    background-color: rgb(255, 255, 255);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(242, 242, 242);
    border-radius: 8px;
    box-shadow: rgb(242 242 242) 0px 10px 40px;
    position: relative;
    left: 10px;
    top: 0;
}
.num{
  border-width: 0px;
    position: absolute;
    left: 93px;
    top: 60px;
    width: 88px;
    height: 32px;
    font-family: PingFangHK-Semibold, "PingFang HK Semibold", "PingFang HK";
    font-weight: 650;
    font-style: normal;
    font-size: 30px;
    color: rgb(41, 132, 248);
    line-height: 32px;
}
.num_1{
  position: absolute;
    left: 0px;
    top: 0px;
    width: 88px;
    height: 32px;
    background-image: inherit;
    background-position: inherit;
    background-size: inherit;
    background-repeat: inherit;
    background-attachment: inherit;
    background-origin: inherit;
    background-clip: inherit;
    background-color: rgba(255, 255, 255, 0);
    border: none;
    border-radius: 0px;
    box-shadow: none;
    font-family: PingFangHK-Semibold, "PingFang HK Semibold", "PingFang HK";
    font-weight: 650;
    font-style: normal;
    font-size: 30px;
    color: rgb(41, 132, 248);
    line-height: 32px;
}
.num_2{
  position: absolute;
    left: 0px;
    top: 0px;
    width: 88px;
    height: 32px;
    background-image: inherit;
    background-position: inherit;
    background-size: inherit;
    background-repeat: inherit;
    background-attachment: inherit;
    background-origin: inherit;
    background-clip: inherit;
    background-color: rgba(255, 255, 255, 0);
    border: none;
    border-radius: 0px;
    box-shadow: none;
    font-family: PingFangHK-Semibold, "PingFang HK Semibold", "PingFang HK";
    font-weight: 650;
    font-style: normal;
    font-size: 30px;
    color: rgb(40,208,148);
    line-height: 32px;
}
.num_3{
  position: absolute;
    left: 0px;
    top: 0px;
    width: 88px;
    height: 32px;
    background-image: inherit;
    background-position: inherit;
    background-size: inherit;
    background-repeat: inherit;
    background-attachment: inherit;
    background-origin: inherit;
    background-clip: inherit;
    background-color: rgba(255, 255, 255, 0);
    border: none;
    border-radius: 0px;
    box-shadow: none;
    font-family: PingFangHK-Semibold, "PingFang HK Semibold", "PingFang HK";
    font-weight: 650;
    font-style: normal;
    font-size: 30px;
    color: rgb(255,199,28);
    line-height: 32px;
}
.num_4{
  position: absolute;
    left: 0px;
    top: 0px;
    width: 88px;
    height: 32px;
    background-image: inherit;
    background-position: inherit;
    background-size: inherit;
    background-repeat: inherit;
    background-attachment: inherit;
    background-origin: inherit;
    background-clip: inherit;
    background-color: rgba(255, 255, 255, 0);
    border: none;
    border-radius: 0px;
    box-shadow: none;
    font-family: PingFangHK-Semibold, "PingFang HK Semibold", "PingFang HK";
    font-weight: 650;
    font-style: normal;
    font-size: 30px;
    color: rgb(255,98,98);
    line-height: 32px;
}
.yuan{
    border-width: 0px;
    position: absolute;
    left: 24px;
    top: 32px;
    width: 53px;
    height: 53px;
}
.yuan img{
    border-width: 0px;
    position: absolute;
    left: -20px;
    top: -10px;
    width: 93px;
    height: 93px;
}
.yuan .icon{
    border-width: 0px;
    position: absolute;
    left: 64px;
    top: 117px;
    width: 16px;
    height: 16px;
}
.icon img{
    border-width: 0px;
    position: absolute;
    left: -45px;
    top: -96px;
    width: 16px;
    height: 16px;
}
.text{
  border-width: 0px;
    position: absolute;
    left: 121px;
    top: 85px;
    width: 66px;
    height: 32px;
    font-family: PingFangSC-Regular, "PingFang SC";
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    color: rgb(153, 153, 153);
    line-height: 32px;
}
.text p span{
  position: absolute;
  top: -60px;
  left: -12px;
}

</style>
